<include file="public@header"/>
<link rel="stylesheet" href="__STATIC__/css/zTree_v3/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<style>
    td input, td select {
        width: auto;
        max-width: 180px;
    }

    .form-horizontal .control-group1 {
        float: left;
        width: 15%;
        margin-bottom: 20px;
    }

    .form-horizontal .control-label {
        width: 80px;
    }

    .form-horizontal .controls {
        margin-left: 90px;
    }

    input, select, textarea, .uneditable-input {
        max-width: 580px;
        width: 100px;
        min-width: auto;
    }

    .div_service {
        width: 130px;
        height: 100px;
        border: #dedcdc solid 1px;
        border-radius: 5px;
        float: left;
        margin-right: 10px;
        margin-left: 7px;
    }

    .div_service_text {
        background-color: #858585;
        color: white;
        text-align: center;
    }
    .div_service_sum {
        text-align: center;
        margin: 20px 0 0 0px;
    }

    /*table thead tr {*/
    /*    background: #0B90C4;*/
    /*}*/
    #table1 tr td {
        max-width: 80px;
        width: auto;
        text-align: center;
        border: #DDDDDD solid 1px;
    }

    /*.content_nav .check_info{flex:1; display:flex;flex-direction: column;align-items: center;justify-content: center;}*/
    #table1 thead tr th {
        border: #DDDDDD solid 1px;
        /*border: 0 !important;*/
    }

    .table-striped > tbody > tr:nth-of-type(odd) {
        background-color: #f7f7f7;
    }

    #table1 table tr th, #table1 table tr td {
        height: 30px;
        line-height: 30px;
    }

    .styles {
        width: 100%;
        margin-left: 9px;
    }

    .you {
        background: #0c6251;
        color: white;
    }

    .size {
        font-size: 30px;
    }

    .bg_qianlv {
        background-color: #E9FEC0;
    }

    .bg_huanglv {
        background-color: #808000;
    }

    .bg_lan {
        background-color: #8080FF;
    }

    .bg_cheng {
        background-color: #F7E1CC;
    }

    .bg_hui {
        background-color: #E6E6E6;
    }

    .bg_bai {
        background-color: #fff;
        border: 1px solid #000
    }

    .bg_lv {
        background-color: #00CC00;
    }

    .bg_huang {
        background-color: #F3D776;
    }

    .bg_red {
        background-color: #FF6699;
    }

    .bg_mei {
        background-color: #E792E0;
    }

    .bg_blue {
        background-color: #33CCFF;
    }

</style>
<body>
<div>
    <div class="js-ajax-form">
        <table border=0 style="align-items: left;">
            <tr>
                <td width=15% align=left valign=top style="BORDER-RIGHT: #999999 1px dashed; padding-bottom: 2%">
                    <div>
                        <input type="text" style=" width:95%; margin-bottom:5px;" class="form-control"
                               name="name" value="" placeholder="按照墓位编号搜索"/>
                        <ul id="tree" class="ztree" style="width:260px; overflow:auto;"></ul>
                    </div>
                </td>
                <td width=95% align=left valign=top>
                    <div class="wrap js-check-wrap">
                        <div class=" well form-search styles">
                            <label style="margin-right: 30px">
                                按价位检索：
                                <select class="form-control" id='price' onchange='changePrice()' style="width: 200px;">
                                    <option value=''>-请选择-</option>
                                </select>
                            </label>
                            <label style="margin-right: 30px">
                                按抵顶人检索:
                                <select class="form-control" id='didingren' onchange='changeDiDingRen()' style="width: 200px">
                                    <option value=''>-请选择-</option>
                                </select>
                            </label>
                            <label style="margin-right: 30px">
                                按供货商检索:
                                <select class="form-control" id='supplier' onchange='changeSupplier()' style="width: 200px">
                                    <option value=''>-请选择-</option>
                                </select>
                            </label>
                            <input type="button" id="submit" class="btn btn-primary" value="查询"/>
                            <input type="button" id="reset" class="btn btn-primary" value="重置"/>
                        </div>
                        <div style="height: 100px" id="statusId">
                            <div class='div_service bg_huanglv' >
                                <p class="div_service_text">无产品</p>
                                <p class="div_service_sum size"><span id="wuchanpin">0</span>套</p>
                            </div>
                            <div class='div_service bg_blue' >
                                <p class="div_service_text">空闲</p>
                                <p class="div_service_sum size"><span id="kongxian">0</span>套</p>
                            </div>
                            <div class='div_service bg_cheng' onclick='statuClick(2)'>
                                <p class="div_service_text">已认购</p>
                                <p class="div_service_sum size"><span id="yirengou">0</span>套</p>
                            </div>
                            <div class='div_service bg_lv' onclick='statuClick(3)'>
                                <p class="div_service_text">定金</p>
                                <p class="div_service_sum size"><span id="dingjin">0</span>套</p>
                            </div>
                            <div class='div_service bg_qianlv' onclick='statuClick(4)'>
                                <p class="div_service_text">无规划</p>
                                <p class="div_service_sum size"><span id="wuguihua">0</span>套</p>
                            </div>
                            <div class='div_service bg_huang'  onclick='statuClick(5)'>
                                <p class="div_service_text">购买未使用</p>
                                <p class="div_service_sum size"><span id="goumaiweishiyong">0</span>套</p>
                             </div>
                            <div class='div_service bg_mei'  onclick='statuClick(6)'>
                               <p class="div_service_text">部分安葬</p>
                                <p class="div_service_sum size"><span id="bufenanzang">0</span>套</p>
                            </div>
                           <div class='div_service bg_red'  onclick='statuClick(7)'>
                                <p class="div_service_text">全部安葬</p>
                                <p class="div_service_sum size"><span id="quanbuanzang">0</span>套</p>
                           </div>
                            <div class='div_service bg_hui'  onclick='statuClick(8)'>
                                <p class="div_service_text">迁墓中</p>
                                 <p class="div_service_sum size"><span id="qianmuzhong">0</span>套</p>
                            </div>

                        </div>
                        <div style="margin-top: 20px;" id="table1">
                            <div class="control-group1-p div_content" style="padding-left: 8px">
                                <!---tab页-->
                                <ul class="nav_tabs" style="margin: 0; padding-top: 9px !important;height: 38px !important;">
                                    <li class="active" data-t="1"><a href="javascript:">客户统计</a></li>
                                </ul>
                                <div class="control-group1-p nav_content">
                                    <div class="content_nav">
                                        <div style="border: 1px solid #0b81c4;border-top: 0;">
                                            <div class="fixed-table-body">
                                                <table id="table_index_1"  class="table table-hover   table-striped " ></table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>

</div>
<script type="text/javascript" src="__STATIC__/js/admin.js"></script>
<link href="__STATIC__/js/bootstrap-table/dist/bootstrap-table.css" rel="stylesheet"/>
<script src="__STATIC__/js/bootstrap-table/dist/bootstrap-table.js"></script>
<script src="__STATIC__/js/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="__STATIC__/js/zTree_v3/jquery.ztree.all.js"></script>
<script type="text/javascript">
    var categorysNodes = '{$result_data}';
    var jsonNodes = JSON.parse(categorysNodes)
    var jsonCategorys = jsonNodes.categorys,
        jsonPrice = jsonNodes.price,
        jsonDidingren = jsonNodes.didingren,
        jsonSupplier = jsonNodes.supplier;

    var setting = {
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        }, check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "pId",
                rootPId: ""
            }
        },
        callback: {
            beforeClick: function (treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("tree");
                if (treeNode.isParent) {
                    zTree.expandNode(treeNode);
                    return false;
                } else {
                    var id = treeNode.id;
                    if (id > 0) {
                        getHtml(id, treeNode);
                    }
                    return true;
                }
            },
            onCheck: zTreeOnCheck
        }
    };
    $(document).ready(function () {
        console.log("{$selected_id_v}")
        $.fn.zTree.init($("#tree"), setting, jsonCategorys);
        var zTree = $.fn.zTree.getZTreeObj("tree");
        var treeNode = zTree.getNodeByTId("{$selected_id_v}");
        if (treeNode){
            zTree.selectNode(zTree.getNodeByParam("tId", "{$selected_id_v}",null))
            var id = treeNode.id;
            if(id>0){
            }
        }
        statuClickList();
        priceSelect(jsonPrice);
        diDingSelect(jsonDidingren);
        supplierSelect(jsonSupplier);
    });

    /**
     * 价位
     * @param data
     */
    function priceSelect(data) {
        var priceHtml = "<option value=''>-请选择-</option>"
        for (var i = 0; i < data.length; i++) {
            if (price == data[i].selling_price) {
                priceHtml += "<option selected value=" + data[i].selling_price + ">" + data[i].selling_price + "</option>"
            } else {
                priceHtml += "<option value=" + data[i].selling_price + ">" + data[i].selling_price + "</option>"
            }
        }
        priceHtml += "";
        $("#price").html(priceHtml);
    }

    /**
     * 抵顶人选择框
     * @param data
     */
    function diDingSelect(data) {
        var diDingHtml = "<option value=''>-请选择-</option>";
        for (var j = 0; j < data.length; j++) {
            if (didingren == data[j].user_nickname) {
                diDingHtml += "<option selected value=" + data[j].user_nickname + ">" + data[j].user_nickname + "</option>"
            } else {
                diDingHtml += "<option value=" + data[j].user_nickname + ">" + data[j].user_nickname + "</option>"
            }
        }
        diDingHtml += ""
        $("#didingren").html(diDingHtml);
    }

    /**
     * 供货商选择框
     * @param data
     */
    function supplierSelect(data) {
        var supplierHtml = "<option value=''>-请选择-</option>";
        for (var j = 0; j < data.length; j++) {
            if (supplier == data[j].id) {
                supplierHtml += "<option selected value=" + data[j].id + ">" + data[j].user_nickname + "</option>"
            } else {
                supplierHtml += "<option value=" + data[j].id + ">" + data[j].user_nickname + "</option>"
            }
        }
        supplierHtml += ""
        $("#supplier").html(supplierHtml);
    }
    var price = "";
    var didingren = "";
    var supplier = "";
    var tombId = [];
    var status ='';

    function zTreeOnCheck(e, treeId, treeNode) {
        console.log(treeNode);
        if (treeNode.checked) {
            setTombId(treeNode)
        } else {
            removeTombId(treeNode);
            console.log("取消")
        }
        console.log(tombId)
    }

    // 检测data有没有值
    function ifValue(data) {
        if (!data) {return false;
        } else {return true;}
    }

    /**
     * 检测tomb中有没有该id
     * */
    function empty(id) {
        var k = 0;
        for (var i = 0; i < tombId.length; i++) {
            if (tombId[i] == id) {
                k++;
            }
        }
        if (k > 0) {
            return false;
        } else {
            return true;
        }
    }

    /**
     * 取消左侧树复选框
     * */
    function removeTombId(data) {
        if (data.type != "" && ifValue(data.children)) {
            for (var i = 0; i < data.children.length; i++) {
                if (data.children[i].type != "") {
                    removeTombId(data.children[i]);
                } else {
                    if (!empty(data.children[i].id)) {
                        var index = tombId.indexOf(data.children[i].id);
                        if (index > -1) {
                            tombId.splice(index, 1);
                        }
                    }
                }
            }
        } else {
            if (!empty(data.id)) {
                var index2 = tombId.indexOf(data.id);
                if (index2 > -1) {
                    tombId.splice(index2, 1);
                }
            }
        }
    }

    // 选中左侧树复选框赋值
    function setTombId(data) {
        if (data.type != "" && ifValue(data.children)) {
            for (var i = 0; i < data.children.length; i++) {
                if (data.children[i].type != "") {
                    setTombId(data.children[i]);
                } else {
                    if (empty(data.children[i].id)) {
                        tombId.push(data.children[i].id);
                    }
                }
            }
        } else {
            if (empty(data.id)) {
                tombId.push(data.id);
            }
        }
    }
    /**
     * 选择价位*/
    function changePrice() {
        price = $("#price").val();
    }
    /**
     * 选择抵顶人*/
    function changeDiDingRen() {
        didingren = $("#didingren").val();
    }

    /**
     * 选择供货商
     * */
    function changeSupplier() {
        supplier = $("#supplier").val();
    }

    /**
     * 点击状态块*/
    function statuClick(val) {
        status = val;
        $('#table_index_1').bootstrapTable("refreshOptions",{url:"{:url('Analysis/statusStatistics')}?ajax=1", queryParams:queryParams});
    }

    function isNull(data) {
        return data == null ? '' : data;
    }

    /**
     * 状态块
     * @param data
     */
    function style(data) {
        for (var i = 0; i < data.length; i++) {
            switch (data[i].col_status) {
                case 0:
                    $('#wuchanpin').text(data[i].count)
                    wuchanpin = data[i].count
                    break;
                case 1:
                    $('#kongxian').text(data[i].count)
                    break;
                case 2:
                    $('#yirengou').text(data[i].count)
                    break;
                case 3:
                    $('#dingjin').text(data[i].count)
                    break;
                case 4:
                    $('#wuguihua').text(data[i].count)
                    break;
                case 5:
                    $('#goumaiweishiyong').text(data[i].count)
                    break;
                case 6:
                    $('#bufenanzang').text(data[i].count)
                    break;
                case 7:  $('#quanbuanzang').text(data[i].count)
                    break;
                case 8: $('#qianmuzhong').text(data[i].count)
                    break;
            }
        }
    }

    // 查询
    $("#submit").click(function () {
        $('#table_index_1').bootstrapTable("refreshOptions",{url:"{:url('Analysis/statusStatistics')}?ajax=1", queryParams:queryParams});
    });
    function statuClickList() {
        var columns = [
            {field: 'no', title: '序号', formatter: function (value, row, index) {
                    //获取每页显示的数量
                    var pageSize = $('#table_index_1' ).bootstrapTable('getOptions').pageSize;
                    //获取当前是第几页
                    var pageNumber = $('#table_index_1'  ).bootstrapTable('getOptions').pageNumber;
                    //返回序号，注意index是从0开始的，所以要加上1
                    return pageSize * (pageNumber - 1) + index + 1;
                }},
            {field: 'closing_time', title: '购买日期'},
            {field: 'tomb_region', title: '区域'},
            {field: 'tomb_address', title: '具体位置',formatter:function (value, row, index) {
                return row.tomb_address+row.tomb_bit_number
                }},
            {field: 'num', title: '墓位编号'},
            {field: 'selling_price_ip', title: '产品价格'},
            {field: 'closing_price', title: '成交价格'},
            {field: 'buyer_name', title: '购墓人'},
            {field: 'deceased_name', title: '使用人信息'},
            {field: 'reacher', title: '抵顶人'},
            {field: 'end_time', title: '供货商'},
            {field: 'col_status', title: '状态', formatter: function (value, row, index) {
                    var type = value == 0 ? '无产品' : (value == 1 ? '空闲' : (value == 2 ? '已认购' : (value == 3 ? '定金' : (value == 4 ? '无规划' : (value == 5 ? '购买未使用' : (value == 6 ? '部分安葬' : (value == 7 ? '全部安葬' : (value == 8 ? '迁墓中' : ''))))))))
                    return type;
                }
            }];

        $("#table_index_1").bootstrapTable({
            url: "{:url('Analysis/statusStatistics')}?ajax=1",
            pageNumber: 1, //初始化加载第一页
            pagination: true,//是否分页
            sidePagination: 'server',
            pageSize: 10,//单页记录数
            pageList: [10, 20, 30, 50, 100],//可选择单页记录数
            showRefresh: false,//刷新按钮
            showColumns: false, //
            columns: columns,
            queryParams: queryParams,
            formatLoadingMessage: function () {
                return "数据正在加载中...";
            },
            formatNoMatches: function () {
                return '无符合条件的记录';
            },
            responseHandler: function (res) {
                style(res.zcount_sum);
                return res
            },
        });
    }

    function queryParams (params) {
        var tomb = tombId.join(",");
        var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            page: params.offset + 0,// SQL语句起始索引
            limit: params.limit,  // 每页显示数量
            didingren: didingren,
            supplier: supplier,
            price: price,
            tombId: tomb,
            status: status
        };
        return temp;
    };


</script>



<script type="text/javascript" src="__STATIC__/js/layer/layer.js"></script>
</body>
</html>